import React, { FC, ReactElement, useMemo } from 'react';
import dayjs from 'dayjs';
import {
  Spin,
  Descriptions,
  Image,
  Carousel,
  Rating,
  Tag
} from '@douyinfe/semi-ui';
import { useCityList, useFieldList } from '@/store';
import type { FieldsGoodsItem } from '../types';

import './Detail.scss';

interface IProps extends Partial<FieldsGoodsItem> {
  loading: boolean;
}

const FieldsGoodsDetail: FC<IProps> = ({
  loading,

  name = '-',
  field = '-',
  img = '-',
  banners = [],
  price = '-',
  defaultPrice = '-',
  address = '-',
  star = 3,
  score = 6,
  cityName = '-',
  recom = '-',
  keywords = '-',
  description = '-',
  createTime = '-',
  updateTime = '-',
}): ReactElement => {
  const cityList = useCityList();
  const fieldList = useFieldList();

  const currentCityName = useMemo(() => {
    return cityList.find(item => item.key === cityName
    )?.name ?? cityName;
  }, [cityList, cityName]);

  const descriptionItems = [
    {
      key: '名称',
      value: name,
    },
    {
      key: '类型',
      value: fieldList.find(item => item.key === field)?.name ?? field,
    },
    {
      key: '封面图片',
      value: <Image src={img} width={300} height={200} />,
    },
    ...(
      banners?.length > 1
        ? [banners?.length > 1 && {
          key: '上传图片组',
          value: (
            <Carousel style={{ width: 300, height: 200 }}>
              {banners.map((item, index) => (
                <div
                  key={index}
                  style={{ backgroundSize: 'cover', backgroundImage: `url('${item}')` }}
                />
              ))}
            </Carousel>
          ),
        }]
        : []
    ),
    {
      key: '最低价格',
      value: defaultPrice ? `￥${defaultPrice}` : '-',
    },
    {
      key: '平均价格',
      value: price ? `￥${price}` : '-',
    },
    {
      key: '地址',
      value: address || '-',
    },
    {
      key: '星评',
      value: <Rating disabled value={star} allowHalf />,
    },
    {
      key: '分数',
      value: score,
    },
    {
      key: '所在城市',
      value: currentCityName,
    },
    {
      key: '推荐理由',
      value: recom || '-',
    },
    {
      key: '关键词',
      value: (
        <div>
          {
            keywords
              ? keywords.split(',').map((item, index) => (
                <Tag style={{ marginRight: 5 }} key={index} color="amber">{item}</Tag>
              ))
              : '-'
          }
        </div>
      ),
    },
    {
      key: '描述',
      value: (
        <pre style={{ textWrap: 'balance' }}>
          {description || '-'}
        </pre>
      )
    },
    {
      key: '创建时间',
      value: dayjs(createTime).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      key: '更新时间',
      value: dayjs(updateTime).format('YYYY-MM-DD HH:mm:ss'),
    },
  ];

  return (
    <div className="fields-goods-list-detail">
      <Spin spinning={loading}>
        <Descriptions data={descriptionItems} />
      </Spin>
    </div>
  );
}

export default FieldsGoodsDetail;
